<template>
  <div>
    <div class="box"></div>
    <button class="button">按钮</button>
    <button class="rounded-[4px] bg-[#3490dc] px-4 py-2 text-center text-white">按钮</button>

    <div class="max-w-sm overflow-hidden rounded-lg bg-white shadow-lg">
      <img class="h-48 w-full object-cover" src="@/assets/img/img-1.png" alt="图片" />
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800">卡片标题</h2>
        <p class="mt-2 text-sm text-gray-600">这是卡片内容，使用 Tailwind CSS 的类名可以轻松实现各种效果。</p>
      </div>
    </div>

    <button class="bg-blue-500 px-4 py-2 text-white sm:text-center lg:text-left">按钮</button>

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <div class="bg-blue-100 p-4">内容 1</div>
      <div class="bg-blue-200 p-4">内容 2</div>
      <div class="bg-blue-300 p-4">内容 3</div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="css" scoped>
.box {
  padding: 5px;
  width: 12px;
  background: #fff;
}
.button {
  background-color: #3490dc;
  padding: 2px 4px;
  border-radius: 4px;
  color: white;
  text-align: center;
}
</style>
